<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title></title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>

<body>
    <div id='app'>
        <div>姓：<input type="text" v-model="firstName"></div>
        <div>名：<input type="text" v-model="lastName"></div>
        <!-- 计算属性使用的时候和普通属性一样 -->
        <div>姓名: {{fullName}}</div>
        <div>姓名: {{fullName}}</div>
        <button @click="setFullName">修改计算属性的值</button>
        <h3>{{getName()}}</h3>
        <h3>{{getName()}}</h3>
    </div>
    <script>
        const vm = new Vue({
            el: '#app',
            data: {
                firstName: '',
                lastName: ''
            },
            // 当我们界面上有一些属性，是需要通过别的属性计算得到的话，我们可以通过计算属性来定义
            computed: {
                // 计算属性定义是定义成函数的形式
                // fullName(){
                //     // 返回的值就是这个属性的值
                //     // 计算属性会做缓存，只有它依赖的数据变化的时候才会重新计算
                //     console.log("***********************计算属性运行***********************");
                //     return this.firstName + this.lastName
                // },
                fullName:{
                    get(){
                        return this.firstName + this.lastName   
                    },
                    set(value){
                        // 根据我们的需求进行赋值
                        console.log("对fullName赋值");
                        let values = value.split("-")
                        this.firstName = values[0];
                        this.lastName = values[1]
                    }
                }
            },
            methods: {
                setFullName(){
                    // 很少涉及到对计算属性赋值
                    this.fullName = "孔-祥瑞"
                },
                getName(){
                    console.log("#######################方法运行#######################");
                    return this.firstName + this.lastName
                }
            },

        })
    </script>
</body>

</html>